<template>

    <div>
        <el-card class="box-cardrightthree">
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" ></el-avatar>

            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="用户性别" prop="region">
                <el-select v-model="ruleForm.region" placeholder="请选择">
                <el-option label="我是男士" value="male"></el-option>
                <el-option label="我是女士" value="female"></el-option>
                <el-option label="猜猜我是啥" value="guess"></el-option>
                <el-option label="未知" value="unknown"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="邮箱" prop="desc">
                <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item>
            <el-form-item label="个性签名" prop="desc">
                <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="edit()" class="edit">编辑个人资料</el-button>
            </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script>
 export default {
    data() {
      return {
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
<style scoped>
.box-cardrightthree {
  width: 50%;
  height:400px;
  margin-top: 50px;
  margin-left: 300px;
  align-items: center;
 justify-content: center;
}
.edit{
    float: right;
}
</style>